import {CCard} from '@/components/card'
import {AppointedDate, PickerDateRange} from '@/components/date'
import {ParamStatusCircle} from '@/components/devCard/paramsCard'
import {IconImg} from '@/components/images'
import {ParamRaw} from '@/components/item'
import {
  ChartLegend,
  LineChart,
  PieChart
} from '@/pages-echarts/components/echarts/singleParamAnalyze'

import {iconUrl, imagesUrl} from '@/utils/baseUrl'
import {Image, View} from '@tarojs/components'
import React, {useEffect, useState} from 'react'

const CCardTitle: React.FC<{
  imgName: string
  title: string
}> = ({imgName, title, children}): JSX.Element => {
  return (
    <View className="h-30 pb-6 flex justify-between  items-center">
      <View className="flex justify-center items-center">
        <Image src={`${iconUrl(imgName)}`} className="w-24 h-24 mr-4"></Image>
        <View className="text-16 font-bold">{title}</View>
      </View>
      {children}
    </View>
  )
}

/**水质详情数据页 参数详情卡片 */
export const ParamInfoCard: React.FC = (): JSX.Element => {
  return (
    <View className="w-full rounded-card p-16 mb-16 bg-white">
      {/* 参数 设备名称 */}
      <View className="h-22 truncate flex items-center">
        <View className="h-full text-16 font-blod mr-16">余氯</View>
        <View className="h-full text-16 text-info_text font-blod">
          -白马体育公园游泳馆监测点
        </View>
      </View>
      {/* 参数数值 单位 状态  检测时间*/}
      <View className="mt-14 mx-4 h-20 flex justify-start items-center">
        <ParamStatusCircle status="偏高"></ParamStatusCircle>
        <View className="text-14 font-bold ml-6 mr-16">偏高</View>
        <View className="flex-1 flex">
          <View className="mr-6 text-14 text-xx_text">0.23</View>
          <View className="text-14 text-xx_text">mg/L</View>
        </View>
        <View className="text-11 text-xxx_text">2022-07-03 16:24:06</View>
      </View>
    </View>
  )
}

/**水质详情数据页 参数详情卡片 */
export const ParamAnaLyseCard: React.FC<{
  timeRangeChange?: (val: [string, string]) => void
}> = ({timeRangeChange}): JSX.Element => {
  const [apsData, setApsData] = useState('') //用于接收日周月选择器返回的开始日期
  const [apeData, setApeData] = useState('') //用于接收日周月选择器返回的结束日期

  const [pksTime, setPksTime] = useState('') //时间选择器中的开始时间
  const [pkeTime, setPkeTime] = useState('') //时间选择器中的结束时间

  useEffect(() => {
    console.log('ParamAnaLyseCard useEffect 时间范围发生变化')
    timeRangeChange && timeRangeChange([pksTime, pkeTime])
  }, [pksTime, pkeTime])

  return (
    <View className="mb-16">
      <CCard title={<CCardTitle title="水质趋势" imgName="paramAnalyse.png" />}>
        {/* 时间选择栏 */}
        <View className="h-32 mt-13 mb-15 flex">
          {/* 日期范围选择器 */}
          <View className="h-full flex-1 mr-12">
            <PickerDateRange
              startTime={apsData}
              endTime={apeData}
              onChange={(s, e) => {
                setPksTime(s)
                setPkeTime(e)
              }}
            ></PickerDateRange>
          </View>
          {/* 日周月选择器 */}
          <AppointedDate
            onChange={(s, e) => {
              setApsData(s)
              setApeData(e)
            }}
          ></AppointedDate>
        </View>
        {/* 参数信息栏 */}
        <View className="h-20 flex justify-between items-center">
          <View className="h-20 flex justify-center items-center">
            {/*参数名称  */}
            <View className="text-14 text-success font-bold mr-4">
              余氯（适宜）
            </View>
            {/* 合格标准 */}
            <View className="text-14 font-normal">合格范围：0.05-1</View>
          </View>
          {/* 参数曲线标识 */}
          <View className="flex justify-center items-center">
            <Image
              src={imagesUrl + 'icon/echart-line.png'}
              className="w-18 h-6 mr-4"
            ></Image>
            <View className="text-10">余氯</View>
          </View>
        </View>
        {/* 折线图表栏 */}
        <LineChart data={{startTime: pksTime, endTime: pkeTime}}></LineChart>
      </CCard>
    </View>
  )
}

/**异常分布 */
export const AbnormalRatioCard: React.FC<{
  startTime?: string
  endTime?: string
}> = ({startTime, endTime}): JSX.Element => {
  return (
    <View className="mb-16">
      <CCard
        title={
          <CCardTitle title="异常分布" imgName="abnormalDistribution.png" />
        }
      >
        <View className="w-full flex">
          <View className="mt-25 ml-13 mr-21">
            <PieChart
              data={{startTime: startTime || '', endTime: endTime || ''}}
            ></PieChart>
          </View>
          <View className="mr-41">
            <ChartLegend></ChartLegend>
          </View>
          <View className="mt-16">
            <View className="flex mb-6">
              <View className="w-48 text-12 mr-18">适宜时段</View>
              <View className="text-12 font-bold text-success">96%</View>
            </View>
            <View className="flex mb-6">
              <View className="w-48 text-12 mr-18">偏高时段</View>
              <View className="text-12 font-bold text-danger">1%</View>
            </View>
            <View className="flex mb-6">
              <View className="w-48 text-12 mr-18">偏低时段</View>
              <View className="text-12 font-bold text-danger">1%</View>
            </View>
            <View className="flex mb-6">
              <View className="w-48 text-12 mr-18">无数据</View>
              <View className="text-12 font-bold text-warning">1%</View>
            </View>
            <View className="flex">
              <View className="w-48 text-12 mr-18">未连接</View>
              <View className="text-12 font-bold text-warning">1%</View>
            </View>
          </View>
        </View>
      </CCard>
    </View>
  )
}

/**历史记录 */
export const HistoryRecordCard: React.FC = (): JSX.Element => {
  return (
    <CCard
      title={
        <CCardTitle title="历史记录" imgName="historyRecord.png">
          <View className="flex justify-center items-center">
            <View className="text-12">全部记录</View>
            {/* <View className="w-16 h-16 iconfont icon-youjiantou text-8 flex justify-center items-center"></View> */}
            <IconImg imgName="allowRight" width={32} height={32}></IconImg>
          </View>
        </CCardTitle>
      }
    >
      <View className="mt-5">
        {new Array(6).fill(1).map(item => (
          <ParamRaw
            height="55px"
            showSplitLine={true}
            paramName="温度"
            paramStatus="偏高"
            paramUnit="℃"
            paramValue="29"
            time="2022-07-03 16:24:06"
            onClick={() => {
              console.log(item)
            }}
          ></ParamRaw>
        ))}
      </View>
    </CCard>
  )
}
